<template>
  <div class="xiecheng">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div>{{ i18n('example.from') }}</div>
        </div>

        <div class="admin_main_block_right">
          <div>
            <el-button icon="Back" @click="router.go(-1)">
              {{ i18n('common.return') }}
            </el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabInfo">
          <el-tab-pane v-if="type == 0 || (id != 0 && type == 1) " name="1" :label="$t('example.basic_info')" :lazy="true">
            <basic ref="basicRef" :model="model" @changeStatus="changeStatus"/>
          </el-tab-pane>
          <el-tab-pane v-if="type == 0 || (id != 0 && type == 2) " :disabled="status" name="2" :label="$t('example.detail_info')" :lazy="true">
            <detail :model="model"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup name="example-form">
  import { useBase } from "@/hooks/base/useBase"
  import { isEmpty } from '@/utils/validate'

  import Basic from '@/components/business/example/basic/index'
  import Detail from '@/components/business/example/detail/index'

  const { router, query, i18n } = useBase()

  const id = ref(0)
  const type = ref(0)
  const basicRef = ref()
  const status = ref(true)
  const activeName = ref('1')
  const model = ref('business/example')

  const handleTabInfo = () => {
    if(isEmpty(id.value) && '1' == activeName.value) {
      query.id = basicRef.value.id
    }
  }

  const changeStatus = (value) => {
    status.value = value
  }

  onMounted(() => {
    id.value = query.id || 0
    type.value = query.type || 0
    status.value = isEmpty(query.id) ? true : false
    activeName.value = query.type ? query.type + '' : '1'
  })
</script>
